<template>
  <!-- 双眼视功能检查 -->
    <el-form inline size="mini" :model="dataForm" :rules="rules" ref="ruleForm">
      <el-row class="bg-row">
        <el-form-item label="验光号">
          <el-input  v-model="checkData.checkNumber" readonly></el-input>
        </el-form-item>
        <el-form-item label="验光师">
          <el-input  v-model="checkData.checker" readonly></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-input  v-model="checkData.checkDate" readonly></el-input>
        </el-form-item>
      </el-row>
      <el-row class="bg-row">
        <el-form-item label="卡号" v-if="customerData.cardNum">
          <el-input v-model="customerData.cardNum" @keyup.enter.native="getCustomerByCardNo()"></el-input>
        </el-form-item>
        <el-form-item label="卡号" v-else>
          <el-input v-model="customerData.uniqueCode"></el-input>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button type="primary" icon="el-icon-search"  @click="openDialog('customer')">查询</el-button>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input class="width-125"  v-model="customerData.name" readonly></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input class="width-125" v-if="customerData.gender == 0" value="男" readonly></el-input>
          <el-input class="width-125" v-if="customerData.gender == 1" value="女" readonly></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-input class="width-125"  v-model="customerData.birthDay" readonly></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input class="width-125"  v-model="customerData.telPhone" readonly></el-input>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button type="primary" icon="el-icon-collection" @click="openDialog('customerDetail')">详情</el-button>
        </el-form-item>
      </el-row>
      <el-divider content-position="left">双眼视功能检查</el-divider>
      <el-row class="bg-row">
        <el-form-item label="双眼视功能检查">
          <el-radio-group v-model="dataForm.isCheck">
              <el-radio label="0">是</el-radio>
              <el-radio label="1">否</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="原因" prop="account" v-if="dataForm.isCheck == '1'" :rules="dataForm.isCheck == '1' ? rules.account : [{required: false}]">
          <el-select v-model="dataForm.account">
            <el-option value="A183" label="年龄过小"></el-option>
            <el-option value="A184" label="配合不好"></el-option>
            <el-option value="A185" label="斜视"></el-option>
            <el-option value="A186" label="弱视"></el-option>
            <el-option value="A187" label="低视力"></el-option>
            <el-option value="A188" label="其它"></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-divider content-position="left">必录项</el-divider>
      <el-row class="bg-row">
        <el-form-item label-width="0">
          <el-select v-model="dataForm.reason">
            <el-option value="1" label="门诊"></el-option>
            <el-option value="2" label="不配合"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交替遮盖试验">
          <el-select v-model="dataForm.coverOd">
            <el-option v-for="item in bizData.coverData" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="遮去遮试验">
          <el-select v-model="dataForm.coveros">
            <el-option v-for="item in bizData.coverData" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="集合近点" prop="sumDot" :rules="dataForm.isCheck == '0' ? rules.sumDot : [{required: false}]">
          <el-input v-model="dataForm.sumDot" ref="sumDot"></el-input>
        </el-form-item>
        <el-form-item label="WORTH 4 DOT 远" prop="farWorth" :rules="dataForm.isCheck == '0' ? rules.farWorth : [{required: false}]">
          <el-select v-model="dataForm.farWorth" ref="farWorth">
            <el-option value="A195" label="2dots"></el-option>
            <el-option value="A196" label="3dots"></el-option>
            <el-option value="A197" label="4dots"></el-option>
            <el-option value="A198" label="5dots"></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <table class="miui-table">
        <tr>
          <td :rowspan="2">
            <el-select v-model="dataForm.facilityflag">
              <el-option value="A6401" label="老视"></el-option>
              <el-option value="A6402" label="不配合"></el-option>
            </el-select>
          </td>
          <td :rowspan="2">调节灵敏度</td>
          <td :colspan="3" style="text-align: left;">
            <el-form-item label="双面镜度数" prop="twoSideSpec" :rules="dataForm.isCheck == '0' ? rules.twoSideSpec : [{required: false}]">
              <el-select v-model="dataForm.twoSideSpec">
                <el-option value="A203" label="±1.00"></el-option>
                <el-option value="A204" label="±1.50"></el-option>
                <el-option value="A205" label="±2.00"></el-option>
                <el-option value="A206" label="±2.50"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="视标" label-width="80px" prop="twoSideTest" :rules="dataForm.isCheck == '0' ? rules.twoSideTest : [{required: false}]">
              <el-select v-model="dataForm.twoSideTest">
                <el-option value="A207" label="20/30"></el-option>
                <el-option value="A208" label="20/40"></el-option>
                <el-option value="A209" label="20/50"></el-option>
              </el-select>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="OU">
              <el-input v-model="dataForm.facilityOu"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item label="OD">
              <el-input v-model="dataForm.facilityOd"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item label="OS">
              <el-input v-model="dataForm.facilityOs"></el-input>
            </el-form-item>
          </td>
        </tr>
      </table>
      <el-divider content-position="left">可选项</el-divider>
      <table class="miui-table">
        <tr>
          <td :rowspan="2">远：隐斜</td>
          <td>水平</td>
          <td><el-input  v-model="dataForm.farHeteLevel"></el-input></td>
          <td>
            <el-select v-model="dataForm.farHeteHevelIo">
              <el-option value="BI" label="BI"></el-option>
              <el-option value="BO" label="BO"></el-option>
            </el-select>
          </td>
          <td :rowspan="2">近：隐斜</td>
          <td>水平</td>
          <td><el-input v-model="dataForm.closeHeteLevel"></el-input></td>
          <td>
            <el-select v-model="dataForm.closeHeteLevelio" v>
              <el-option value="BI" label="BI"></el-option>
              <el-option value="BO" label="BO"></el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>垂直</td>
          <td><el-input v-model="dataForm.farHeteUprightness"></el-input></td>
          <td>
            <el-select v-model="dataForm.farHeteUprightnessUd">
              <el-option value="BU" label="BU"></el-option>
              <el-option value="BD" label="BD"></el-option>
            </el-select>
          </td>
          <td>垂直</td>
          <td><el-input v-model="dataForm.closeHeteUprightness"></el-input></td>
          <td>
            <el-select v-model="dataForm.closeHeteUprightnessud">
              <el-option value="BU" label="BU"></el-option>
              <el-option value="BD" label="BD"></el-option>
            </el-select>
          </td>
        </tr>
      </table>
      <table class="miui-table">
        <tr>
          <td style="width: 50px;">测试</td>
          <td style="width: 50px;">+1</td>
          <td>
            <el-input class="width-125" style="margin-bottom: 3px;" v-model="dataForm.testBig"></el-input>
            <el-select v-model="dataForm.testBigIo">
              <el-option value="BI" label="BI"></el-option>
              <el-option value="BIO" label="BIO"></el-option>
            </el-select>
          </td>
          <td style="width: 50px;">-1</td>
          <td>
            <el-input class="width-125" style="margin-bottom: 3px;" v-model="dataForm.testSmall"></el-input>
            <el-select v-model="dataForm.testSmallIo">
              <el-option value="BI" label="BI"></el-option>
              <el-option value="BI" label="BIO"></el-option>
            </el-select>
          </td>
          <td style="width: 50px;">AC/A</td>
          <td><el-input v-model="dataForm.aca"></el-input></td>
        </tr>
        <tr>
          <td>BCC</td>
          <td :colspan="6">
            <el-form-item label-width="0"><el-input></el-input></el-form-item>
            <el-form-item label="立体视">
              <el-radio-group v-model="dataForm.isSolidWatch">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </td>
        </tr>
      </table>
      <table class="miui-table">
        <tr>
          <td :rowspan="2" style="width: 120px;">正/负相对调节</td>
          <td style="width: 60px;">PRA:</td>
          <td>
            <el-form-item label="OU">
              <el-input v-model="dataForm.positiveAccPra"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item label="OD">
              <el-input v-model="dataForm.positiveAccPraOd"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item label="OS">
              <el-input v-model="dataForm.positiveAccPraOs"></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td style="width: 60px;">NRA:</td>
          <td>
            <el-form-item label="OU">
              <el-input v-model="dataForm.negativeAccNra"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item label="OD">
              <el-input v-model="dataForm.negativeAccNraOd"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item label="OS">
              <el-input v-model="dataForm.negativeAccNraOs"></el-input>
            </el-form-item>
          </td>
        </tr>
      </table>
      <table class="miui-table">
        <tr>
          <td style="width: 50px;">Add</td>
          <td>
            <el-form-item label="OD">
              <el-select v-model="dataForm.addOd">
                <el-option value="1" label="门诊"></el-option>
                <el-option value="2" label="不配合"></el-option>
              </el-select>
            </el-form-item>
          </td>
          <td>
            <el-form-item label="OS">
              <el-select v-model="dataForm.addOs">
                <el-option value="1" label="门诊"></el-option>
                <el-option value="2" label="不配合"></el-option>
              </el-select>
            </el-form-item>
          </td>
          <td>
            <el-form-item label="不等像视">
              <el-radio-group v-model="dataForm.equalWatch">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </td>
        </tr>
      </table>
      <table class="miui-table">
        <tr>
          <td :colspan="10"></td>
          <td>R注视</td>
          <td>L注视</td>
        </tr>
        <tr>
          <td :rowspan="2" style="width: 80px">远：融像</td>
          <td :rowspan="2" style="width: 60px">水平</td>
          <td style="width: 40px">-</td>
          <td><el-input v-model="dataForm.farAmaLevelN"></el-input></td>
          <td><el-input v-model="dataForm.farAmaLevelNo"></el-input></td>
          <td><el-input v-model="dataForm.farAmaLevelNt"></el-input></td>
          <td :rowspan="2" style="width: 60px">垂直</td>
          <td style="width: 40px">BU</td>
          <td><el-input v-model="dataForm.farAmaBu"></el-input></td>
          <td><el-input v-model="dataForm.farAmaBuo"></el-input></td>
          <td><el-input v-model="dataForm.farAmaLbu"></el-input></td>
          <td><el-input v-model="dataForm.farAmaLbuo"></el-input></td>
        </tr>
        <tr>
          <td style="width: 40px">+</td>
          <td><el-input v-model="dataForm.farAmaLevelP"></el-input></td>
          <td><el-input v-model="dataForm.farAmaLevelPo"></el-input></td>
          <td><el-input v-model="dataForm.farAmaLevelPt"></el-input></td>
          <td style="width: 40px">BD</td>
          <td><el-input v-model="dataForm.farAmaBd"></el-input></td>
          <td><el-input v-model="dataForm.farAmaBdo"></el-input></td>
          <td><el-input v-model="dataForm.farAmaLbd"></el-input></td>
          <td><el-input v-model="dataForm.farAmaLbdo"></el-input></td>
        </tr>
        <tr>
          <td :colspan="10"></td>
          <td>R注视</td>
          <td>L注视</td>
        </tr>
        <tr>
          <td :rowspan="2" style="width: 80px">近：融像</td>
          <td :rowspan="2" style="width: 60px">水平</td>
          <td style="width: 40px">-</td>
          <td><el-input v-model="dataForm.closeAmaLevelN"></el-input></td>
          <td><el-input v-model="dataForm.closeAmaLevelNo"></el-input></td>
          <td><el-input v-model="dataForm.closeAmaLevelNt"></el-input></td>
          <td :rowspan="2" style="width: 60px">垂直</td>
          <td style="width: 40px">BU</td>
          <td><el-input v-model="dataForm.closeAmaBu"></el-input></td>
          <td><el-input v-model="dataForm.closeAmaBuo"></el-input></td>
          <td><el-input v-model="dataForm.closeAmaLbu"></el-input></td>
          <td><el-input v-model="dataForm.closeAmaLbuo"></el-input></td>
        </tr>
        <tr>
          <td style="width: 40px">+</td>
          <td><el-input v-model="dataForm.closeAmaLevelP"></el-input></td>
          <td><el-input v-model="dataForm.closeAmaLevelPo"></el-input></td>
          <td><el-input v-model="dataForm.closeAmaLevelPt"></el-input></td>
          <td style="width: 40px">BD</td>
          <td><el-input v-model="dataForm.closeAmaBd"></el-input></td>
          <td><el-input v-model="dataForm.closeAmaBdo"></el-input></td>
          <td><el-input v-model="dataForm.closeAmaLbd"></el-input></td>
          <td><el-input v-model="dataForm.closeAmaLbdo"></el-input></td>
        </tr>
      </table>
      <div style="position: fixed;bottom: 0;left: 0;right: 0;height: 45px;background-color: #d2d9db;display: flex;align-items: center;justify-content: flex-end;padding: 0 40px;">
        <el-button type="primary" @click="refractiveFormSubmit" v-prevent-re-click>保 存</el-button>
      </div>
      <!-- <el-row style="margin: 15px auto;text-align: center;">
        <el-button type="primary" @click="refractiveFormSubmit" v-prevent-re-click>保 存</el-button>
      </el-row> -->
      <!-- 弹窗，查询顾客 -->
      <search-customer v-if="searchCustomerVisible" ref="searchCustomer" @refreshForm="getCustomerData"></search-customer>
      <!-- 弹窗，顾客详情 -->
      <detail-customer v-if="detailCustomerVisible" ref="detailCustomer"></detail-customer>
    </el-form>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { filterParams } from '@/util/tools'
  import { addChkOptometryBasic, saveDoubleEyeFunction, getDoubleEye } from '@/api/admin/optometry/optometry'

  import SearchCustomer from '@/components/business/customer-search'
  import DetailCustomer from '@/views/eims/customer/detail'
  export default {
    data() {
      return {
        visible: false,
        activeName: 'third',
        id: '',
        searchCustomerVisible: false,
        detailCustomerVisible: false,
        checkData: {
          checkNumber: '',
          checker: '',
          checkDate: ''
        },
        dataForm:{
          isCheck: '0'
        },
        chkDatas:[],
        customerData: {},
        //  验证规则
        rules: {
          account: [{required: true, message: '请填写未双眼视功能检查原因！',trigger: 'blur' }],
          sumDot: [{required: true, message: '请填写集合近点',trigger: 'blur' }],
          farWorth: [{required: true, message: '请选择四点灯',trigger: 'blur' }],
          twoSideSpec: [{required: true, message: '请选择双面镜度数',trigger: 'blur' }],
          twoSideTest: [{required: true, message: '请选择视标',trigger: 'blur' }]
        }
      }
    },
    components: {
      SearchCustomer,
      DetailCustomer
    },
    computed: {
      ...mapGetters(['permissions', 'bizData', 'userInfo', 'isCollapse'])
    },
    methods: {
      init(data) {
        this.visible = true
        this.checkData = data.checkData
        this.customerData = data.customer
        this.id = data.id
        for(let key in this.dataForm){
          this.dataForm[key] = ''
        }
        this.$nextTick(() => {
          if(this.id){
            getDoubleEye(this.id).then(result => {
              let resultData = result.data.data
              if(resultData){
                this.dataForm = resultData
              }
              console.log(result)
            })
          }
        })
      },
      //  打开弹窗
      openDialog(name) {
        switch (name) {
          case 'customer':
            this.searchCustomerVisible = true
            this.$nextTick(() => {
              this.$refs.searchCustomer.init()
            })
            break;
          case 'customerDetail':
            this.detailCustomerVisible = true
            this.$nextTick(() => {
              this.$refs.detailCustomer.init(this.customerData.id, '会员详细')
            })
            break;
        }
      },
      //  获取客户信息
      getCustomerData(data) {
        this.customerData = data
      },
      //  保存提交
      refractiveFormSubmit() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            if(!this.id){
              let params1 = {
                customerId: this.customerData.id,
                customerName: this.customerData.name,
                personId: this.customerData.personId,
                chkNumber: this.checkData.checkNumber
              }
              addChkOptometryBasic(params1).then(result => {
                this.id = result.data.data
                this.$emit('addBasic',result.data.data)
              })
            }else{
              this.$emit('addBasic',this.id)
            }
          } else {
            if(this.dataForm.isCheck == '1'){
              this.$message.warning('请填写未双眼视功能检查原因！')
            }else{
              this.$message.warning('请填写完整的双眼视功能检查信息！')
            }
            return false;
          }
        });

      },
      saveRefractive(data) {
        let params1 = {
          optometryBasicId: data,
          customerId: this.customerData.id,
          chkNumber: this.checkData.checkNumber
        }
        let params2 = filterParams(this.dataForm)
        saveDoubleEyeFunction(Object.assign(params1,params2)).then(result => {
          if(result.data.data){
            this.$message.success('双眼视功能检查保存成功')
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .bg-row {
    // background-color: #cadee8;
    padding-left: 15px;
    padding-top: 5px;
  }
  .width-125 {
    width: 125px;
  }
  .miui-table {
    width: 100%;
    margin: 10px 0;
    background-color: #b1e2ec3b;
    tr th {
      background-color: #f4f5f7;
    }

    tr th, tr td {
      padding: 10px 8px;
      border: solid 1px #e7e7e7;
      text-align: center;
    }
    .miui-table-header td{
      background-color: #7898a8;
      color: #fff;
    }
    .miui-table-tbody{
      background-color: #cadee8;
    }
  }
</style>
